<%@page import="java.util.Date"%>
<%@page import="com.moefor.clover.model.Goods"%>
<%@page import="com.moefor.clover.model.Message"%>
<%@page import="java.util.Set"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<base href="<%=basePath%>">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clover</title>

<link href="res/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
	padding-bottom: 30px;
	background: url(res/img/background.gif) repeat 0 0;
}
/***********************nva****************************/
.nav-item:hover {
	background-color: #F0F0F0 !important;
}

.active .nav-item:hover {
	background-color: #e7e7e7 !important;
	cursor: pointer;
}

.glyphicon {
	top: 3px;
}

.open .dropdown-toggle {
	background: #FFF !important;
}

.dropdown-menu {
	border: 0px;
	margin-top: -1px !important;
}

.dropdown-menu a {
	text-align: center;
}

.control {
	padding: 3px 0px;
	text-align: center;
}

.control a {
	display: inline-block !important;
	width: 60px;
	padding: 0px !important;
	color: #888 !important;
}

#msgs .dropdown-header {
	text-align: center;
	color: #222;
	font-size: 16px;
	font-weight: bold;
}

.msg-item {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.msg-item span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block !important;
	padding: 0 5px !important;
}

#user-icon a {
	padding: 3px 0 !important;
}

#user-icon a:hover {
	background-color: #FFF;
}
/***********************nva****************************/
/***********************search-box****************************/
.search-box {
	width: 100%;
	height: 100%;
}

.search-box select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-progress-appearance: none;
	border: solid 3px #FB9000;
	border-right: 0;
	width: 80px;
	height: 100%;
	float: left;
	outline: none;
	background-color: #F5F5F5;
	color: #777;
	padding: 0 10px;
	background-image: url(res/img/down-tag.png);
	background-repeat: no-repeat;
	background-position: right;
}

.search-box select option {
	background-color: #FFF;
}

.search-box input[type="text"] {
	border: solid 3px #FB9000;
	width: calc();
	width: -moz-calc(100% -180px);
	width: -webkit-calc(100% - 180px);
	height: 100%;
	outline: none;
	padding: 0px 5px;
	float: left;
	border-right: 0;
	border-left: 0;
}

.search-box input[type="submit"] {
	width: 100px;
	height: 100%;
	border: 0;
	background-color: #FB9000;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	outline: none;
}

.search-box input[type="submit"]:hover {
	background-color: #FDAC3F;
}
/***********************search-box****************************/

/***********************footer****************************/
footer {
	border-top: solid 3px #FB9000;
	padding-top: 20px;
	margin: 40px 0;
}

footer hr {
	margin: 10px 0;
}

footer a {
	color: #777;
	text-decoration: none;
	padding: 0 2px;
}

footer a:hover {
	color: #FB9000;
	text-decoration: none;
}

footer a:link {
	text-decoration: none;
}

footer a:visited {
	color: #777;
}

footer .copyright {
	color: #AAA;
}
/***********************footer****************************/

/***********************goods-list****************************/
.col-md-offset-1_5 {
	margin-left: 12.5%;
}

@media screen and (max-width: 991px) {
	#goods-page {
		padding-left: 0px;
		padding-right: 0px;
	}
	.col-md-offset-1_5 {
		margin-left: 0;
	}
}

.good-box {
	padding: 10px 15px;
}

.good-item {
	height: 144px;
	background-color: #FFF;
	padding: 10px;
	box-shadow: 0 0 5px #ccc;
}

.good-info {
	height: 100%;
	width: calc(100% - 165px);
	width: -moz-calc(100% - 165px);
	width: -webkit-calc(100% - 165px);
	float: left;
}

.seller-info {
	height: 100%;
	border-left: 1px solid #F8F6E4;
	width: 165px;
	float: left;
	background-color: #FFFEF8;
	padding-left: 10px;
}

.good-pic-box {
	height: 100%;
	width: 124px;
	float: left;
}

.good-pic {
	width: 100%;
	height: 100%;
	background: url("res/img/3.jpg") no-repeat center;
	display: inline-block;
	background-size: cover;
}

.good-des-box {
	height: 100%;
	width: calc(100% - 124px);
	width: -moz-calc(100% - 124px);
	width: -webkit-calc(100% - 124px);
	padding-left: 15px;
	padding-right: 20px;
	float: left;
}

.good-name {
	color: #222;
	display: inline-block;
	max-width: 35%;
	padding-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.good-name:hover {
	color: #222;
}

.good-name:visited {
	color: #222;
}

.good-name:link {
	color: #222;
	text-decoration: none;
}

.good-market {
	color: #222;
	display: inline-block;
	padding-bottom: 8px;
	margin-left: 10px;
	max-width: 55%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.good-market:hover {
	color: #222;
}

.good-market:visited {
	color: #222;
}

.good-market:link {
	color: #222;
	text-decoration: none;
}

.glyphicon-map-marker {
	top: 1px;
}

.delete {
	font-size: 16px;
	color: #bbb;
	float: right;
}

.delete:hover {
	color: #333;
}

.good-des-box b {
	color: #999;
}

.good-des-box em {
	color: #F40;
	font-weight: 700;
	font-size: 14px;
	font-style: normal;
	font-family: Verdana;
}

.good-des-box div {
	height: 40px;
	width: 100%;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 5px;
}

.publish-time {
	float: left;
	color: #999;
}

.leave-word {
	float: right;
	margin-right: 20px;
}

.A {
	color: #FB9000;
	text-decoration: none;
}

.A:hover {
	color: #FB9000;
	text-decoration: none;
}

.A:link {
	text-decoration: none;
}

.A:visited {
	color: #FB9000;
}

.seller-name {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 60px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: inline-block;
}

.other-good {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding-top: 13px;
}

@media screen and (max-width: 525px) {
	.seller-info {
		display: none;
	}
	.good-info {
		width: 100%;
	}
	.good-des-box {
		padding-right: 0;
	}
}

/***********************goods-list****************************/
</style>
</head>

<body>

	<nav id="top" class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img style="float: left; height: 50px;" src="res/img/logo.png" /> <a
					class="navbar-brand" href="home.page">Clover</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<%
                	if(request.getAttribute("user") != null){
                %>
				<ul id="user-nav" class="nav navbar-nav">
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-user" aria-hidden="true"></span>
							${user.username}<span class="caret"></span></a>
						<ul class="dropdown-menu" style="min-width: 130px;" role="menu">
							<li id="user-icon"><a href="userinfo.page"><img
									class="img-circle"
									style="width:120px;height:120px;background:url(${user.avator.url}) no-repeat center;background-size:cover;"
									id="user-icon" /></a></li>
							<li class="control"><a href="userinfo.page">账号管理</a><a
								href="user/signout.do">注销登陆</a></li>
						</ul></li>
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							消息 <span class="caret"></span></a>
						<ul id="msgs" class="dropdown-menu" role="menu">
							<li class="dropdown-header">未读的新消息</li>
							<%					
		     						Object object = request.getAttribute("msgSet");
		     						if(object != null && !((Set<Message>)object).isEmpty()){
		     							for(Message msg : (Set<Message>)object){
			     							out.print("<li role='separator' class='divider'></li>");
			     							out.print("<li class='msg-item'><span style='width:70%;text-align:left'>"+
			     								msg.getContent()+
			     								"</span><span style='width:30%;'>"+
			     								msg.getSender().getUsername()+	
			     								"</span></li>");
			     							out.print("<li role='separator' class='divider'></li>");
			     						}
		     						}else{
		     							out.print("<li role='separator' class='divider'></li>"+
		     										"<li class='msg-item'><span style='width:70%;text-align:left'>"+
			     									"<span>暂时没有新消息</span>"+
			     									"</span></li>"+
			     									"<li role='separator' class='divider'></li>");						
		     						}
		     	%>
							<li><a id='checkAll' href="userinfo.page#comment"
								style="width: 100%; text-align: center;">查看全部</a></li>
						</ul></li>
				</ul>
				<%
                	}else{
               	%>
				<ul id="visitor-nav" class="nav navbar-nav">
					<li><a class="nav-item" href="sign.page#signin"
						style="color: #D70057;">亲，请先登录</a></li>
					<li><a class="nav-item" href="sign.page">免费注册</a></li>
				</ul>
				<%
               		}
               	%>

				<ul class="nav navbar-nav navbar-right">
					<li><a class="nav-item" href="deal.page"><span
							class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
							我的交易</a></li>
					<li><a class="nav-item" href="onsale.page"><span
							class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
							我的寄售</a></li>
					<!-- 
                    <li><a class="nav-item" href="favorite.page"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 我的收藏</a></li>  
                     -->
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container">
		<div class="row" style="padding: 30px 0;">
			<div class="col-md-6 col-md-offset-3" style="height: 34px;">
				<form class="search-box">
					<select>
						<option value="goods">商品</option>
						<option value="market">Market</option>
					</select> <input type="text" placeholder="Search"> <input
						type="submit" value="搜索">
				</form>
			</div>
		</div>

		<div id="main-container" class="row">

			<div id="goods-page" class="col-md-8 col-md-offset-2">
				<%
            	Object object = request.getAttribute("goodsItems");
            	if(object != null){
            		for(Goods goods : (Set<Goods>)object){
            			long tmp = (new Date()).getTime() - goods.getDate().getTime();
						String date;
						if((tmp/24/60/60/1000) >= 1){
							date = tmp/24/60/60/1000 + "天";
						}else if((tmp/60/60/1000) >= 1){
							date = tmp/60/60/1000 + "小时";
						}else if((tmp/60/1000) >= 1){
							date = tmp/60/1000 + "分钟";
						}else{
							date = "1分钟";
						}
            			out.print("<div class='good-box'>"+
		                                "<div class='good-item'>"+
		                                "<div class='good-pic-box'>"+
		                                    "<a href='item.page?goodsid=" + goods.getId() + "' class='good-pic' style='background: url(" + goods.getPicItems().iterator().next().getUrl() + ") no-repeat center;background-size:cover;'></a>"+
		                                "</div>"+
		                                "<div class='good-des-box'>"+
		                                    "<a class='good-name' href='item.page?goodsid=" + goods.getId() + "'>" + goods.getName() + "</a>"+
		                                    "<p><b>¥ </b><em>" + goods.getPrice() + "</em></p>"+
		                                    "<div>" + goods.getIntroduction() + "</div>"+
		                                    "<p class='publish-time'>" + date + "前</p>"+
		                                    "<a class='leave-word A' href='item.page?goodsid=" + goods.getId() + "#comment'>评论" + goods.getCommentItems().size() + "</a>"+
		                                "</div>"+                 
		                            "</div>"+               
		                        "</div>");
            		}
            	}
            %>

			</div>
		</div>

		<footer>
			<div class="link-group">
				<a href="http://www.jmu.edu.cn/">集美大学</a> <a
					href="http://xtw.jmu.edu.cn/">集美大学校团委</a> <a
					href="http://cec.jmu.edu.cn/">集美大学计算机工程学院</a>
			</div>
			<hr>
			<span class="copyright">© 2016 Clover 版权所有</span>
		</footer>

	</div>



	<script src="res/js/jquery.min.js"></script>
	<script src="res/js/bootstrap.min.js"></script>
	<script type="text/javascript">
  
        $(document).ready(function(){
            
        	$(".search-box input[type='submit']").click(function(){
            	if($(this).prevAll('select').val() == "goods"){
            		location.href = "home.page#keyword=" + $(this).prevAll("input").val();
            	}else{
            		location.href = "home.page#market=" + $(this).prevAll("input").val();
            	}
            	
            	return false;
            });
        	$("#checkAll").click(function(){
            	$.ajax({
            		'async':false,
            		'url':'msg/read_all.do'
            	})
            })
        });
    </script>
</body>
</html>